import { Table, Row, Col } from 'antd';
import React from 'react';
import './index.scss';

export default function GoodsInfo(props) {
  const {
    orderItem: { orderId, goods, goodsNum },
  } = props;
  const width = 150;
  const tableColumns = [
    {
      title: '商品',
      dataIndex: 'goods',
      key: '1',
      fixed: 'left',
    },
    {
      title: '单价',
      width,
      dataIndex: 'price',
      key: '2',
    },
    {
      title: '数量',
      width,
      dataIndex: 'goodsNum',
      key: '3',
    },
    {
      title: '优惠',
      width,
      dataIndex: 'discount',
      key: '4',
    },
    {
      title: '小计',
      width,
      dataIndex: 'subtotal',
      key: '5',
    },
    {
      title: '发货状态',
      width,
      dataIndex: 'orderState',
      key: '6',
      fixed: 'right',
    },
  ];
  const tableData = [{ key: 1, orderId, goods, goodsNum }];
  return (
    <div className='goods-info-root'>
      <Table
        columns={tableColumns}
        dataSource={tableData}
        summary={() => <Table.Summary></Table.Summary>}
        sticky
        pagination={false}
      />
      <Row justify='end'>
        <Col>商品总价：</Col>
        <Col span={2}>415.00</Col>
      </Row>
      <Row justify='end'>
        <Col>运费：</Col>
        <Col span={2}>0</Col>
      </Row>
      <Row justify='end'>
        <Col>优惠：</Col>
        <Col span={2}>0</Col>
      </Row>
      <Row justify='end' style={{ color: 'red' }}>
        <Col>实收金额：</Col>
        <Col span={2}>415.00</Col>
      </Row>
    </div>
  );
}
